<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气查询系统</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 登录/注册表单 -->
        <div id="auth-container" class="auth-container">
            <div class="tabs">
                <button class="tab-btn active" data-tab="login">登录</button>
                <button class="tab-btn" data-tab="register">注册</button>
            </div>
            
            <div id="login-form" class="form-container">
                <h2>登录</h2>
                <form id="loginForm">
                    <div class="form-group">
                        <label for="login-email">邮箱</label>
                        <input type="email" id="login-email" required>
                    </div>
                    <div class="form-group">
                        <label for="login-password">密码</label>
                        <input type="password" id="login-password" required>
                    </div>
                    <button type="submit">登录</button>
                </form>
            </div>

            <div id="register-form" class="form-container" style="display: none;">
                <h2>注册</h2>
                <form id="registerForm">
                    <div class="form-group">
                        <label for="register-username">用户名</label>
                        <input type="text" id="register-username" required>
                    </div>
                    <div class="form-group">
                        <label for="register-email">邮箱</label>
                        <input type="email" id="register-email" required>
                    </div>
                    <div class="form-group">
                        <label for="register-password">密码</label>
                        <input type="password" id="register-password" required>
                    </div>
                    <button type="submit">注册</button>
                </form>
            </div>
        </div>

        <!-- 天气查询界面 -->
        <div id="weather-container" class="weather-container" style="display: none;">
            <div class="weather-header">
                <h2>天气查询</h2>
                <button id="logout-btn">退出登录</button>
            </div>
            
            <div class="search-container">
                <input type="text" id="location-input" placeholder="输入城市名称">
                <button id="search-btn">查询</button>
            </div>

            <div class="tabs">
                <button class="tab-btn active" data-tab="current">当前天气</button>
                <button class="tab-btn" data-tab="forecast">天气预报</button>
                <button class="tab-btn" data-tab="history">历史天气</button>
            </div>

            <div id="current-weather" class="weather-content">
                <h3>当前天气</h3>
                <div id="current-weather-data"></div>
            </div>

            <div id="forecast-weather" class="weather-content" style="display: none;">
                <h3>天气预报</h3>
                <div id="forecast-weather-data"></div>
            </div>

            <div id="history-weather" class="weather-content" style="display: none;">
                <h3>历史天气</h3>
                <div class="history-form">
                    <input type="date" id="history-date">
                    <button id="history-search-btn">查询</button>
                </div>
                <div id="history-weather-data"></div>
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html> 